<template>
<div>
  <div class="app-container">
    <el-steps :active="active" finish-status="success">
      <el-step title="步骤 1 添加车辆"></el-step>
      <el-step title="步骤 2"></el-step>
      <el-step title="步骤 3"></el-step>
    </el-steps>


    <div :hidden="isAvailable1">
      <el-form ref="form" :model="form.vehicleInfoDTO"  label-width="100px">
        <el-form-item label="归属城市" prop="city">
          <el-select v-model="form.vehicleInfoDTO.cityId" placeholder="请选择归属城市">
            <el-option
              v-for="item in cityElementTree"
              :key="item.name"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="车辆级别" prop="vehicleLevelId">
          <el-select v-model="form.vehicleInfoDTO.vehicleLevelId" placeholder="请选择车辆级别">
            <el-option
              v-for="item in levelList"
              :key="item.levelName"
              :label="item.levelName"
              :value="item.levelId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择车型" prop="vehicleTypeId">
          <el-select v-model="form.vehicleInfoDTO.vehicleTypeId" placeholder="请选择车型">
            <el-option
              v-for="item in modelList"
              :key="item.model"
              :label="item.model"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车辆VIN码" prop="vinCode">
          <el-input v-model="form.vehicleInfoDTO.vinCode" placeholder="请输入车辆VIN码"/>
        </el-form-item>
        <el-form-item label="车牌号" prop="licensePlate">
          <el-input v-model="form.vehicleInfoDTO.licensePlate" placeholder="请输入车牌号"/>
        </el-form-item>
        <el-form-item label="是否安装车脑" prop="installedVehicleBrain">
          <el-radio v-model="form.vehicleInfoDTO.installedVehicleBrain" value="0" label="0">是</el-radio>
          <el-radio v-model="form.vehicleInfoDTO.installedVehicleBrain" value="1" label="1">否</el-radio>
        </el-form-item>
        <div :hidden="isAvailable">
          <el-form-item label="车脑品牌" prop="vehicleBrainBrand">
            <el-input v-model="form.vehicleInfoDTO.vehicleBrainBrand" placeholder="请输入车脑品牌"/>
          </el-form-item>
          <el-form-item label="车脑编号" prop="vehicleBrainCode">
            <el-input v-model="form.vehicleInfoDTO.vehicleBrainCode" placeholder="请输入车脑编号"/>
          </el-form-item>
        </div>
        <el-form-item label="大屏品牌" prop="largeScreenBrand">
          <el-input v-model="form.vehicleInfoDTO.largeScreenBrand" placeholder="请输入大屏品牌"/>
        </el-form-item>
        <el-form-item label="大屏编号" prop="largeScreenCode">
          <el-input v-model="form.vehicleInfoDTO.largeScreenCode" placeholder="请输入大屏编号"/>
        </el-form-item>
        <el-form-item label="车辆状态" prop="vehicleStatus">
          <el-radio v-model="form.vehicleInfoDTO.vehicleStatus" label="0">启用</el-radio>
          <el-radio v-model="form.vehicleInfoDTO.vehicleStatus" label="1">停用</el-radio>
        </el-form-item>
      </el-form>
    </div>

    <div :hidden="isAvailable2" >
      <el-form ref="form" :model="form.rideHailingCarInfoDTO" :rules="rules" label-width="150px">
        <el-form-item label="公司标识" prop="vehicleIdId">
          <el-input v-model="form.rideHailingCarInfoDTO.company" placeholder="请输入公司标识" />
        </el-form-item>
        <el-form-item label="车辆厂牌" prop="brand">
          <el-input v-model="form.rideHailingCarInfoDTO.brand" placeholder="请输入车辆厂牌" />
        </el-form-item>
        <el-form-item label="公司类型" prop="type">
          <el-input v-model="form.rideHailingCarInfoDTO.type" placeholder="请输入公司标识" />
        </el-form-item>
        <el-form-item label="车辆所有人" prop="owner">
          <el-input v-model="form.rideHailingCarInfoDTO.owner" placeholder="请输入车辆所有人" />
        </el-form-item>
        <el-form-item label="车辆颜色" prop="color">
          <el-input v-model="form.rideHailingCarInfoDTO.color" placeholder="请输入车辆颜色" />
        </el-form-item>
        <el-form-item label="发动机号/电动机号" prop="engineNumber">
          <el-input v-model="form.rideHailingCarInfoDTO.engineNumber" placeholder="请输入发动机号/电动机号" />
        </el-form-item>
        <el-form-item label="车辆注册日期" prop="registrationDate">
          <el-date-picker clearable
                          v-model="form.rideHailingCarInfoDTO.registrationDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择车辆注册日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="车辆燃料类型" prop="operatingArea">
          <el-input v-model="form.rideHailingCarInfoDTO.fuelType" placeholder="请输入车辆经营区域" />
        </el-form-item>
        <el-form-item label="发动机排量" prop="displacement">
          <el-input v-model="form.rideHailingCarInfoDTO.displacement" placeholder="请输入发动机排量" />
        </el-form-item>
        <el-form-item label="车辆照片文件编号" prop="photoFileNumber">
          <el-input v-model="form.rideHailingCarInfoDTO.photoFileNumber" placeholder="请输入车辆照片文件编号" />
        </el-form-item>
        <el-form-item label="运输证字号" prop="transportCertificateNumber">
          <el-input v-model="form.rideHailingCarInfoDTO.transportCertificateNumber" placeholder="请输入运输证字号" />
        </el-form-item>
        <el-form-item label="车辆运输证发证机构" prop="transportCertificateIssuingAuthority">
          <el-input v-model="form.rideHailingCarInfoDTO.transportCertificateIssuingAuthority" placeholder="请输入车辆运输证发证机构" />
        </el-form-item>
        <el-form-item label="车辆经营区域" prop="operatingArea">
          <el-input v-model="form.rideHailingCarInfoDTO.operatingArea" placeholder="请输入车辆经营区域" />
        </el-form-item>
        <el-form-item label="车辆运输证有效期起" prop="transportCertificateValidFrom">
          <el-date-picker clearable
                          v-model="form.rideHailingCarInfoDTO.transportCertificateValidFrom"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择车辆运输证有效期起">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="车辆运输证有效期止" prop="transportCertificateValidTo">
          <el-date-picker clearable
                          v-model="form.rideHailingCarInfoDTO.transportCertificateValidTo"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择车辆运输证有效期止">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="车辆初次登记日期" prop="firstRegistrationDate">
          <el-date-picker clearable
                          v-model="form.rideHailingCarInfoDTO.firstRegistrationDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择车辆初次登记日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="车辆年审核状志" prop="nextAnnualInspectionDate">
          <el-radio v-model="form.rideHailingCarInfoDTO.annualInspectionStatus" label="0">通过</el-radio>
          <el-radio v-model="form.rideHailingCarInfoDTO.annualInspectionStatus" label="1">未通过</el-radio>
        </el-form-item>
        <el-form-item label="车辆检修状态" prop="nextAnnualInspectionDate">
          <el-radio v-model="form.rideHailingCarInfoDTO.maintenanceStatus" label="0">通过</el-radio>
          <el-radio v-model="form.rideHailingCarInfoDTO.maintenanceStatus" label="1">未通过</el-radio>
        </el-form-item>
        <el-form-item label="车辆下次年检时间" prop="nextAnnualInspectionDate">
          <el-date-picker clearable
                          v-model="form.rideHailingCarInfoDTO.nextAnnualInspectionDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择车辆下次年检时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="发票打印设备序列号" prop="invoicePrinterSerialNumber">
          <el-input v-model="form.rideHailingCarInfoDTO.invoicePrinterSerialNumber" placeholder="请输入发票打印设备序列号" />
        </el-form-item>
        <el-form-item label="卫星定位装置品牌" prop="gpsBrand">
          <el-input v-model="form.rideHailingCarInfoDTO.gpsBrand" placeholder="请输入卫星定位装置品牌" />
        </el-form-item>
        <el-form-item label="卫星定位装胃型号" prop="gpsModel">
          <el-input v-model="form.rideHailingCarInfoDTO.gpsModel" placeholder="请输入卫星定位装胃型号" />
        </el-form-item>
        <el-form-item label="卫星定位装置IMEI号" prop="gpsImei">
          <el-input v-model="form.rideHailingCarInfoDTO.gpsImei" placeholder="请输入卫星定位装置IMEI号" />
        </el-form-item>
        <el-form-item label="卫星定位设备安装日期" prop="gpsInstallationDate">
          <el-date-picker clearable
                          v-model="form.rideHailingCarInfoDTO.gpsInstallationDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择卫星定位设备安装日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="报备日期" prop="reportDate">
          <el-date-picker clearable
                          v-model="form.rideHailingCarInfoDTO.reportDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择报备日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="服务类型" prop="serviceClass">
          <el-input v-model="form.rideHailingCarInfoDTO.serviceClass" placeholder="请输入服务类型" />
        </el-form-item>
      </el-form>
    </div>
  </div>


  <div :hidden="isAvailable3" >
    <el-form ref="form" :model="form.vehicleDocumentPhotos" :rules="rules" label-width="150px">
      <el-form-item label="车辆发票照片" prop="invoicePhoto">
        <image-upload v-model="form.vehicleDocumentPhotos.invoicePhoto" :limit="1"/>
      </el-form-item>
      <el-form-item label="合格证照片" prop="licensePlatePhoto">
        <image-upload v-model="form.vehicleDocumentPhotos.licensePlatePhoto" :limit="1" />
      </el-form-item>
      <el-form-item label="行驶证照片" prop="drivingLicensePhoto">
        <image-upload v-model="form.vehicleDocumentPhotos.drivingLicensePhoto" :limit="1"/>
      </el-form-item>
      <el-form-item label="登记证书照片" prop="registrationCertificatePhoto">
        <image-upload v-model="form.vehicleDocumentPhotos.registrationCertificatePhoto" :limit="1"/>
      </el-form-item>
      <el-form-item label="完税证明照片" prop="taxCertificatePhoto">
        <image-upload v-model="form.vehicleDocumentPhotos.taxCertificatePhoto" :limit="1"/>
      </el-form-item>
      <el-form-item label="汽车运输证照片" prop="transportCertificatePhoto">
        <image-upload v-model="form.vehicleDocumentPhotos.transportCertificatePhoto" :limit="1"/>
      </el-form-item>
      <el-form-item label="其他一照片" prop="other1Photo">
        <image-upload v-model="form.vehicleDocumentPhotos.other1Photo" :limit="1"/>
      </el-form-item>
      <el-form-item label="其他一照片" prop="other2Photo">
        <image-upload v-model="form.vehicleDocumentPhotos.other2Photo" :limit="1"/>
      </el-form-item>
    </el-form>
  </div>

  <span :hidden="isAvailable4">
    <el-button style="margin-top: 12px;"  @click="prev">上一步</el-button>
  </span>
  <span :hidden="isAvailable5">
    <el-button style="margin-top: 12px;" @click="next" >下一步</el-button>
  </span>
  <span :hidden="isAvailable6">
     <el-button type="primary" @click="submitForm">提交</el-button>
  </span>


</div>
</template>

<script>
import {addInfo, updateInfo, updateInfoById} from "@/api/boss/info";
import {cityElementTree, cityElementList} from "@/api/boss/city";
import {listLevelAll} from "@/api/boss/level";
import {listModelAll} from "@/api/boss/model";
import {hidden} from "chalk";

export default {
  data() {
    return {
      vehicleId: null,
      isAvailable: false,
      isAvailable1: false,
      isAvailable2: true,
      isAvailable3: true,
      isAvailable4: true,
      isAvailable5: false,
      isAvailable6: true,
      active: 1,
      form: {
        vehicleInfoDTO:{},
        vehicleDocumentPhotos:{},
        rideHailingCarInfoDTO:{}
      },
      cityElementTree: [],
      levelList: [],
      modelList: []
    };
  },
  watch: {
    "form.vehicleInfoDTO.installedVehicleBrain"(newVal){
      if (this.form.vehicleInfoDTO.installedVehicleBrain === "1") {
        this.isAvailable = true;
      }else {
        this.isAvailable = false;
      }
    },
    active (){
      if (this.active === 1) {
        this.isAvailable4 = true
        this.isAvailable1 = false
        this.isAvailable2 = true
        this.isAvailable3 = true
        this.isAvailable5 = false
        this.isAvailable6 = true
      }
      if (this.active === 2) {
        this.isAvailable1 = true
        this.isAvailable2 = false
        this.isAvailable3 = true
        this.isAvailable4 = false
        this.isAvailable5 = false
        this.isAvailable6 = true
      }
      if (this.active === 3) {
        this.isAvailable1 = true
        this.isAvailable2 = true
        this.isAvailable3 = false
        this.isAvailable5 = true
        this.isAvailable4 = false
        this.isAvailable6 = false
      }
    }
  },
  created() {
    cityElementTree().then(response => {
      this.cityElementTree = response.data;
    });
    listLevelAll().then(response => {
      this.levelList = response.data;
    });
    listModelAll().then(response => {
      this.modelList = response.data;
    });
      updateInfoById(this.$route.query.id).then(response => {
          this.form = response.data;
      });
  },

  methods: {
    hidden,
    next() {
      if (this.active++ > 2) this.active = 3;
    },
    prev() {
      if (this.active-- === 1) this.active = 1;
    },
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.$route.query.id !== null) {
            updateInfo(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
            });
          } else {
            addInfo(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
            });
          }
        }
        this.$router.push({ path: "/boss/BaseInfo" });
      });
    },
  }
}
</script>
